<!--  -->
<template>
  <div class="order">
    <div class="order-title f-18 flex justify-center aligin-center">订单</div>
    <div class="tab-wrap">
      <Scroll :scrollX="true">
        <TabCommon
          :isScroll="true"
          :tabs.sync="tabs"
          :tabIndex.sync="tabIndex"
          @tabChange="tabChange"
        ></TabCommon>
      </Scroll>
    </div>
    <div class="order-list-wrapper">
      <Scroll
        :preventDefault="true"
        :click="true"
        :tap="true"
        :pullup="true"
        :pulldown="true"
        @scrollToEnd="scrollToEnd"
        :data.sync="orderList"
        ref="myScroll"
      >
        <div>
          <OrderList
            :orderList.sync="orderList"
            @evaluation="evaluation"
            @toDetail="toDetail"
            @cancelOrder="cancelOrder"
            @orderDel="orderDel"
            @orderCf="orderCf"
            @changeStutas="changeStutas"
          ></OrderList>
          <div class="loading-bottom mt-10 f-14" v-if="loading">加载中...</div>
          <div class="loading-bottom mt-10 f-14" v-if="noMore">没有更多了</div>
        </div>
      </Scroll>
    </div>
    <van-dialog v-model="qcodeFlag" title="消费券码" @confirm="closeDialog">
      <div class="flex aligin-center flex-column">
        <img class="coupon-img" :src="conponQcode.qr_code">
        <div class="mt-4">{{conponQcode.code}}</div>
        <div class="mt-4">共{{conponQcode.goods_list[0].num}}张,仅支持一起核销</div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import Nav from "../../components/Nav";
import Scroll from "../../components/Scroll";
import TabCommon from "../../components/OrderTab";
import OrderList from "../../components/OrderList";
import Page from "../../mixin/page";
import {
  order,
  cancelOrder,
  orderDestroy,
  orderConfirm,
  orderStatus
} from "../../api/api";
import { Dialog } from "vant";
export default {
  mixins: [Page],
  components: {
    Scroll,
    TabCommon,
    Nav,
    OrderList
  },
  data() {
    return {
      orderList: [], //订单数组
      tabs: ["全部", "待付款", "待发货", "已发货", "待评价", "已完成"],
      tabIndex: 0,
      qcodeFlag: false,
      conponQcode: {goods_list:[{}]},
      couponTimer: null
    };
  },
  computed: {
    orderType() {
      switch (this.tabIndex) {
        //全部
        case 0:
          return 10;
        //待付款
        case 1:
          return 0;
        //待发货
        case 2:
          return 1;
        //已发货
        case 3:
          return 2;
        //待评价
        case 4:
          return 3;
        //售后
        case 5:
          return -1
        //已完成
        case 6:
          return 4;
      }
    }
  },
  watch: {},
  methods: {
    //评价
    evaluation(id) {
      this.$router.push({ name: "evaluation", params: { id } });
    },
    closeDialog() {
      
      if (this.couponTimer) {
        clearInterval(this.couponTimer);
        this.couponTimer = null;
      }
    },
    changeStutas(item, index) {
      this.conponQcode = item;
      this.qcodeFlag = true;
      this.couponTimer = setInterval(() => {
        orderStatus({ order_no: item.order_no }).then(
          ({ data: { result } }) => {
            if (parseInt(result.order_status) != 1) {
              if (this.tabIndex == 2) {
                this.orderList.splice(index, 1);
              } else {
                this.$set(
                  this.orderList[index],
                  "order_status",
                  parseInt(result.order_status)
                );
              }
              this.$toast("核销成功");
              clearInterval(this.couponTimer);
              this.couponTimer = null;
              this.qcodeFlag = false;
            }
          }
        );
      }, 1000);
    },
    //确认收货
    orderCf(id, index) {
      Dialog.confirm({
        title: "提示",
        message: "确定收货吗？"
      })
        .then(() => {
          orderConfirm({ order_no: id }).then(res => {
            if (this.tabIndex == 3) {
              this.orderList.splice(index, 1);
            } else {
              this.$set(this.orderList[index], "order_status", 3);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    // 删除订单
    orderDel(id, index) {
      Dialog.confirm({
        title: "提示",
        message: "确定删除订单吗？"
      })
        .then(() => {
          orderDestroy({ order_no: id }).then(res => {
            this.orderList.splice(index, 1);
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    // 取消订单
    cancelOrder(id, index) {
      Dialog.confirm({
        title: "提示",
        message: "确定取消订单吗？"
      })
        .then(() => {
          cancelOrder({ order_no: id }).then(res => {
            this.orderList.splice(index, 1);
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    // 进入详情页
    toDetail(id) {
      this.$router.push({ name: "orderDetail", params: { id } });
    },
    tabChange(index) {
      if (this.tabIndex != index) {
        this.tabIndex = index;
        //重置
        this.current_page = 0;
        this.last_page = 1;
        this.loading = false;
        this.orderList = [];

        this._api();
      }
    },
    _api() {
      order({
        page: this.current_page + 1,
        type: this.orderType
      }).then(({ data: { result } }) => {
        if (result && result.length != 0) {
          this.orderList = [...this.orderList, ...result];
          this.current_page += 1;
          this.last_page = this.current_page + 1;
        } else {
          this.last_page = this.current_page;
        }
        this.loading = false;
      });
    }
  },
  created() {},
  mounted() {
    if (this.$route.query.index) {
      this.tabIndex = parseInt(this.$route.query.index);
    }
    this._api();
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.order {
  height: 100%;
  .order-title {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 44px;
    background: #fff;
    z-index: 102;
  }
  .tab-wrap {
    position: fixed;
    top: 44px;
    left: 0;
    width: 100%;
    z-index: 102;
    background: #fff;
    overflow: hidden;
  }
  .order-list-wrapper {
    padding: 104px 15px 44px;
    height: calc(100% - 89px);
  }
  .loading-bottom {
    width: 100%;
    text-align: center;
  }
}
.coupon-img {
  width: 200px;
  height: 200px;
}
</style>